import React from 'react';
import { Card, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import Search from './components/Search';
import { pageList } from '@/services/Admin';
import { Link } from 'umi';
import columns from './columns';

class Admin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      params: {},
      dataSource: []
    }
    this.proTableRef = React.createRef();
  }

  /* 监听查询事件 */
  onSearch = (data) => {
    const params = this.state.params;
    this.setState({params: {...params, ...data}});
    this.proTableRef.current.reload();
  }

  /* 刷新事件 */
  onReload = () => {
    this.setState({params: {}});
    this.proTableRef.current.reload();
  }

  /* 监听操作 更新当前页面数据 */
  setDataSource = (data) => {
    this.setState({dataSource: data});
  }

  /* 获取列表数据 */
  getPageList = async (currentParams) => {
    try {
      const params = this.state.params;
      const res = await pageList({
        ...params,
        ...currentParams
      })
      this.setState({dataSource: res.data});
      return {
        data: res.data,
        total: res.totalSize,
        success: true
      }
    } catch (e) {
      console.error(e)
    }
  }

  render() {
    const proTableRef = this.proTableRef;
    const dataSource = this.state.dataSource;
    const {onSearch, onReload, setDataSource} = this;
    return (
      <PageContainer>
        <Card
          bodyStyle={{ paddingTop: 30, paddingBottom: 0 }}
          title="角色列表"
          bordered={false}>
          <Search search={onSearch} reset={onReload} />
        </Card>
        <ProTable
          // params={{pageSize: 1}}
          // pagination={{pageSizeOptions: [1,2,3]}}
          actionRef={proTableRef}
          headerTitle={
            <Link to='/setting/admin/add'><Button type="primary" icon={<PlusOutlined />}>新增管理员</Button></Link>
          }
          rowKey='id'
          search={false}
          scroll={{ x: true }}
          dataSource={dataSource}
          columns={columns(dataSource, setDataSource)}
          request={this.getPageList} />
      </PageContainer>
    );
  }
}

export default Admin;
